<template>
  <view>
    <view class="common head">
      <view class="search-bar">
        <u-search @change="search()" @search="search()" @clear="clear()" v-model="keyword" shape="round" clearabled
                  :show-action="false" placeholder="请输入标签关键字"></u-search>
      </view>
      <view>
        <u-button @click="navigate2LabelAdd" :custom-style="{border:'none'}" :hairline="false" icon="plus-circle"
                  size="large"></u-button>
      </view>
    </view>
    <view class="common content">
      <view v-for="(item,index) in curLabels" :key="index">
        <u--form>
          <u-form-item @click="navigate2LabelUpdate(item)" label-width="40" border-bottom>
            <u-input
                disabled
                disabledColor="#fff"
                border="none">
              <template slot="prefix">
                <u-tag
                    :text=item.content
                    :color="item.color"
                    :border-color="item.color"
                    shape="circle"
                    plain>
                </u-tag>
              </template>
              <template slot="suffix">
                <u-icon name="arrow-right"></u-icon>
              </template>
            </u-input>
            <u-icon slot="right" color="#fff" name="arrow-right"></u-icon>
          </u-form-item>
        </u--form>
      </view>
    </view>

  </view>
</template>

<script>

export default {
  onShow() {
    this.getLabelList()
  },
  data() {
    return {
      keyword: '',
      labels: [],
      curLabels: []
    }
  },
  methods: {
    async getLabelList() {
      let db = uniCloud.database()
      this.labels = this.curLabels = (await db.collection('label').get()).result.data
    },
    // 使用type字段表示新增或修改 0-新增 1-修改
    navigate2LabelAdd() {
      uni.navigateTo({
        url: './LabelAddOrUpdate?type=0'
      })
    },
    navigate2LabelUpdate(label) {
      uni.navigateTo({
        url: `./LabelAddOrUpdate?type=1&label=${JSON.stringify(label)}`
      })
    },
    search(value) {
      this.curLabels = this.labels.filter(item => item.content.indexOf(value, 0) !== -1)
    },
    clear() {
      this.keyword = ''
    }
  }
}
</script>

<style lang="scss">
.content {
  margin-top: 10px;
}

.head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;

  .search-bar {
    width: 100%;
  }
}

::v-deep.fixed_button {
  position: fixed;
  right: 30px;
  bottom: 30px;
  border: none;
}
</style>
